<template>
  <v-container fluid grid-list-md>
    <v-layout row wrap>
      <v-flex xs10 md6>
        <v-card>
          <v-card-text class="px2">
            <div ref="sale" style="width: 100%;height:350px"></div>
          </v-card-text>
        </v-card>
      </v-flex>

      <v-flex xs10 md6>
        <v-card>
          <v-card-text class="px2">
            <div ref="pie" style="width: 100%;height:350px"></div>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");
require("echarts/lib/chart/pie");

export default {
  name: "dashboard",
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      var sale = echarts.init(this.$refs.sale);

      // 指定图表的配置项和数据
      var option = {
        color: ["#3398DB"],
        title: {
          text: "销售统计"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: [""]
        },
        xAxis: [
          {
            type: "category",
            data: ["冰箱", "洗衣机", "冷柜", "空调", "电视", "烟灶"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      sale.setOption(option);

      const pie = echarts.init(this.$refs.pie);

      pie.setOption({
        roseType: "angle",
        title: {
          text: "访问来源"
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
             center: ['50%', '50%'],
            data: [
              { value: 235, name: "热水器" },
              { value: 274, name: "净水机" },
              { value: 310, name: "烟灶" },
              { value: 335, name: "电视" },
              { value: 400, name: "冷柜" }
            ].sort(function (a, b) { return a.value - b.value; })
            
          }
        ],
        itemStyle: {
          emphasis: {
            // 阴影的大小
            shadowBlur: 200,
            // 阴影水平方向上的偏移
            shadowOffsetX: 0,
            // 阴影垂直方向上的偏移
            shadowOffsetY: 0,
            // 阴影颜色
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      });
    });
  }
};
</script>

<style scoped>
</style>
